<template>
	
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/images/b-1.png"></image>
		<image class="img-b" src="/static/images/b-2.png"></image>
		<!-- 标题 -->
		<view class="avatar">
		  <image class="logoimg" src="@/static/images/avatar.png" mode="widthFix"></image>
		</view>
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">{{ subTitle }}</view>
		<!-- 表单 -->
		<!-- <view class="login-form-content">
		</view> -->
		<form style="display: 100rpx;">
			<view class="cu-bar solids-bottom solid-top margin-top-xs">
				<view class="action text-gray">
					<text class="cuIcon-titles text-blue"></text>
					<text class="text-lg">登录管理平台</text>
				</view>
				<view class="action">
					
					<uni-icons type="refreshempty" size="20" color="#0081ff" @click="refreshLoginform"></uni-icons>
					<!-- <text class="cuIcon-refresh text-gray" @click="refreshLoginform"></text> -->
				</view>
			</view>
			<view class="cu-form-group input-item">
				<!-- <view class="title">账号</view> -->
				<uni-icons type="person" size="30" color="#0081ff"></uni-icons>
				<!-- <text class="cuIcon-people text-blue"></text> -->
				<input type="text" class="margin-left-lg" v-model="loginForm.username" style="font-size: 35rpx;" placeholder="请输入账号" />
				
			</view>
			<view class="cu-form-group input-item">
				<!-- <view class="title">密码</view> -->
				<uni-icons type="locked" size="30" color="#0081ff"></uni-icons>
				<!-- <text class="cuIcon-lock text-blue"></text> -->
				<input type="text" class="margin-left-lg" v-model="loginForm.password" style="font-size: 35rpx;" placeholder="请输入密码" password />
			</view>
			
			<uni-grid :column="2" :show-border="false">
				<uni-grid-item style="height: 150rpx;">
					<view class="cu-form-group input-item">
						
						<uni-icons custom-prefix="iconfont" type="icon-safe" size="25" color="#0081ff"></uni-icons>
						<!-- <text class="cuIcon-safe text-blue"></text> -->
						<input type="text" class="margin-left-lg" v-model="loginForm.code" style="font-size: 35rpx;" placeholder="验证码"/>
					</view>
				</uni-grid-item>
				<uni-grid-item style="height: 150rpx;">
					<view style="margin-top: 20rpx;text-align: right;">
						<image :src="codeUrl" @click="getCode" style="height: 100rpx;width: 300rpx;"></image>
					</view>
					
				</uni-grid-item>
			</uni-grid>
			<view class="margin-bottom-xl text-blue">
				<text @click="forgetPassWord">忘记密码？</text>
				
			</view>
			
			<view class="flex flex-direction">
				
				<button class="cu-btn bg-gradual-blue no-radius" @click="handleLogin">
					<!-- <uni-icons type="locked-filled" size="25" color="#fff"></uni-icons> -->
					<text class="text-xl">登 录</text>
					</button>
			</view>
			
		</form>
	</view>
</template>

<script>
	
	import { getCodeImg } from '@/api/login'
	
	export default {
		data() {
			return {
				title:getApp().globalData.config.appInfo.name,
				subTitle:"欢迎使用，开始工作吧！",
				codeUrl: "",
				captchaEnabled: true,
				// 用户注册开关
				register: false,
				globalConfig: getApp().globalData.config,
				loginForm: {
				  username: "",
				  password: "",
				  code: "",
				  uuid: ''
				}
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			//重置登录表单
			refreshLoginform(){
				this.loginForm.username = '',
				this.loginForm.password = '',
				this.loginForm.code = ''
			},
			//获取验证码
			getCode() {
			  getCodeImg().then(res => {
			    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
			    if (this.captchaEnabled) {
			      this.codeUrl = 'data:image/gif;base64,' + res.img
			      this.loginForm.uuid = res.uuid
			    }
			  })
			},
			// 登录方法
			async handleLogin() {
			  if (this.loginForm.username === "") {
			    this.$modal.msgError("请输入您的账号")
			  } else if (this.loginForm.password === "") {
			    this.$modal.msgError("请输入您的密码")
			  } else if (this.loginForm.code === "" && this.captchaEnabled) {
			    this.$modal.msgError("请输入验证码")
			  } else {
			    this.$modal.loading("登录中，请耐心等待...")
			    this.pwdLogin()
			  }
			},
			// 密码登录
			async pwdLogin() {
			  this.$store.dispatch('Login', this.loginForm).then(() => {
			    this.$modal.closeLoading()
			    this.loginSuccess()
			  }).catch(() => {
			    if (this.captchaEnabled) {
			      this.getCode()
			    }
			  })
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
			  // 设置用户信息
			  // this.$tab.reLaunch('/pages/index/index')
			  this.$store.dispatch('GetInfo').then(res => {
			    this.$tab.reLaunch('/pages/index/index')
			  })
			},
			//忘记密码
			forgetPassWord(){
				// uni.showToast({
				// 	title:'请联系管理员',
				// 	icon:'error'
				// })
				this.$modal.msgError("请联系管理员")
			},
		}
	}
</script>

<style lang="scss" scoped>
.input-item{
	// margin: 20px auto;
	margin-top: 20rpx;
	background-color: #F8F7FC;
	height: 45px;
	border-radius: 30px;
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	margin-top: 10%;
	font-size: 28rpx;
	color: #000;
}
.t-captcha {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.t-captcha-img {
	margin-left: 16px;
	width: 102px;
	height: 44px;
}
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
	z-index: -999;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	z-index: -999;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login .t-b {
	text-align: center;
	font-size: 45rpx;
	color: #282C35;
	padding: 80rpx 0 20rpx 0;
	// font-weight: bold;
}
.t-login .t-b2 {
	text-align: center;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 60rpx 0;
}

.avatar {
    // margin-left: 25%;
    // margin-right: 40%;
	// margin-top: 10%;
    display: flex;
    /*盒子模型*/
    flex-direction: row;
    /*横向*/
    justify-content: space-around;
    /*主轴居中*/
    align-items: center;
    /*纵轴居中*/
	
  }
  
  .logoimg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50px;
    // background: #000;
    // border: 1px solid #fff;
    border-width: 5px 5px 5px 5px;
    box-shadow: 1px 1px 5px #333;
    -webkit-box-shadow: 1px 1px 5px #333;
    -moz-box-shadow: 1px 1px 5px #333;
	background-color: #1494dc;
  }
  .login-form-content{
	  border-radius: 10px;
	  // background: #000;
	  // border: 1px solid #fff;
	  border-width: 1px 1px 1px 1px;
	  box-shadow: 1px 1px 1px #aaa;
	  -webkit-box-shadow: 1px 1px 5px #aaa;
	  -moz-box-shadow: 1px 1px 5px #aaa;
	  // background-color: #fff;
  }
 

</style>
